<template>
<div class="inquiryList">
  <div class="wrap">
    <div class="hd" v-show="!loading">
      <span style="text-transform : uppercase;">{{header.carNo}}({{header.carType | carTypeFilter}}) 共{{obj.length}}条违章</span>
      <span>更新时间: {{header.upTime}}</span>
    </div>
    <div class="bd">
      <loading v-show="loading" class="loading"></loading>
      <div class="item" :class="{hightLight: isActive}" v-for="(o, index) in obj" @click="hightLight(o.violationId)">
        <div class="cell c0">
          <div class="k k1">{{o.violationTime | timeFilter}}</div>
          <div class="v">
            <span class="bl" v-if="o.dealFlag==1&&o.kf==0">
               <label @click="deal(o.violationId, true)"> <input type="checkbox" :dataId="o.violationId"  :datajjf="csd.violations_dealFee_fast"  :datakf="o.kf"  name="deal"/>我要办理</label>
            </span>
            <span class="bl" v-if="o.dealFlag==1&&o.kf!=0">
               <label @click="deal(o.violationId, true)"> <input type="checkbox" :dataId="o.violationId"    :datakf="o.kf"  name="deal"/>我要办理</label>
            </span>
            <span class="bl"   v-if="o.dealFlag == 0 && o.selfkf == 1">
               <label @click="deal(o.violationId, true)"> <input type="checkbox" :dataId="o.violationId"  :datakf="o.kf"   name="deal"/>我要办理</label>
            </span>
          </div>
        </div>
        <div class="cell">
          <div class="k">地点：</div>
          <div class="v">{{o.viloationLocation}}</div>
        </div>
        <div class="cell c1">
          <div class="k">行为：</div>
          <div class="v v1">{{o.viloationDetail}}</div>
        </div>
        <div class="cell">
          <div class="k">罚金：</div>
          <div class="v">
            <span :class="{fj:o.dealFlag==1}" v-show="o.dealFlag==1">{{o.fineFee/100 | moneyFilter}}</span>
            <span :class="{fj:o.dealFlag==0&& o.selfkf == 1}" v-show="o.dealFlag==0&& o.selfkf == 1">{{o.fineFee/100 | moneyFilter}}</span>
          </div>
        </div>
        <div class="cell c2">
          <div class="k">服务：</div>
          <div class="v" >
            <div class="tags">
              <span class="isdeal" v-show="o.dealFlag==1">可以受理</span>
              <span class="isdeal" v-show="o.dealFlag == 0 && o.selfkf == 1">可以受理</span>
              <!-- 代办费 -->
              <span class="b" v-if="o.dealFlag==1&&o.kf==0" :class="{dbf: o.dealFlag==1}">+{{csd.violations_dealFee}}</span>
              <span class="b" v-if="o.dealFlag==0&&o.selfkf == 1&&o.kf==0" :class="{dbf: o.dealFlag==1&&o.selfkf == 1}">+{{csd.violations_dealFee}}</span>
              <span class="b" v-if="o.dealFlag==1&&o.kf>0" :class="{dbf: o.dealFlag==1&&o.kf>0}">+{{csd.violations_dealFee_points}}</span>
              <span class="b" v-if="o.dealFlag==0&&o.selfkf == 1&&o.kf>0" :class="{dbf: o.dealFlag==0&&o.selfkf == 1&&o.kf>0}">+{{csd.violations_dealFee_points}}</span>
            </div>
            <div class="tags">
              <span class="dealtype type2" v-if="o.dealFlag==1&&o.kf>0">扣车主本人分</span>
              <span class="dealtype type2" v-if="o.dealFlag==0&&o.selfkf == 1&&o.kf>0">扣车主本人分</span>
              <span class="b cred" v-if="o.dealFlag==1&&o.kf>0">扣{{o.kf}}分</span>
              <span class="b cred" v-if="o.dealFlag==0&&o.selfkf == 1&&o.kf>0">扣{{o.kf}}分</span>
            </div>
            <div class="tags">
              <span class="dealtype type1 znj" v-if="o.lateFee>0">滞纳金</span>
              <span class="b" v-if="o.lateFee>0">+{{o.lateFee}}</span>
            </div>
             <div class="tags">
               <span class="dealtype type1" v-if="o.kf==0&&o.dealFlag==1&&o.urgent!=-1">加急费</span>
               <span class="dealtype type1" v-if="o.kf==0&&o.dealFlag==0&&o.selfkf == 1&&o.urgent!=-1">加急费</span>
               <span class="b jjf" v-if="o.kf==0&&o.dealFlag==1&&o.urgent!=-1">+{{csd.violations_dealFee_fast}}</span>
               <span class="b jjf" v-if="o.kf==0&&o.dealFlag==0&&o.selfkf == 1&&o.urgent!=-1">+{{csd.violations_dealFee_fast}}</span>
             </div>
          </div>
        </div>
      </div>
      <div class="paypanel" v-show="showPayPanel">
        <div class="hd">
          <input type="checkbox" @click="allSelect" class="all" id="all"/>
          <label for="all">全选</label>
          <input type="checkbox" @click="sbtStatus" class="sbt" id="sbt"/>
          <label for="sbt">"加急"服务<span class="cred">(有扣分不能加急)</span></label>
        </div>
        <div class="bd">
          <div class="m" v-show="isExistKf">
            <div class="tt">车主驾驶证信息：<span>(必须是车主本人的广东省驾驶证)</span></div>
            <div class="tv">
              <span class="tk">驾驶证号：</span>
              <span class="tx">
                 <input type="text" v-model="driver_license"/>
             </span>
            </div>
          </div>
          <div class="m">
            <div class="tt" style="text-transform : uppercase;">费用信息:({{header.carNo}}共选择代办{{selectCount}}条违章)</div>
            <div class="tv">
              <span class="tk">罚款本金：</span>
              <span class="tx">￥{{totalFineFee}}</span>
            </div>
            <div class="tv">
              <span class="tk">代办费：</span>
              <span class="tx">￥{{totalDbf}}</span>
            </div>
            <div class="tv">
              <span class="tk">加急费：</span>
              <span class="tx">￥{{totalJjf}}</span>
            </div>
            <div class="tv" v-show="isEmail">
              <span class="tk">邮寄费：</span>
              <span class="tx">￥{{totalEmailFee}}</span>
            </div>
            <div class="tv">
              <span class="tk">总费用：</span>
              <span class="tx">￥{{totalPay}}</span>
            </div>
            <div class="tv">
              <span class="tk">委托人名：</span>
              <span class="tx">
             <input type="text" v-model="principal"/>
           </span>
            </div>
            <div class="tv">
              <span class="tk">联系电话：</span>
              <span class="tx">
             <input type="text" v-model="principal_phone"/>
           </span>
            </div>
            <div class="tv tv1">
              <span class="tk">相关单据：</span>
              <span class="tx">
              <input type="radio" name="email" checked @click="email(false)"/>不寄
              <input type="radio" name="email" @click="email(true)"/>邮寄
           </span>
            </div>
            <div class="em" v-show="isEmail">
              <div class="rm">按首单{{csd.violations_mail_fee}}元，第二单每单{{csd.violations_mail_cost}}元收取服务费。提倡低碳环保，按需选择</div>
              <span class="tk">收件人姓名：<input type="text" v-model="re_name"/></span>
              <span class="tk">收件人手机：<input type="text" v-model="re_phone"/></span>
              <span class="tk">收件人地址：<input type="text" v-model="re_address"/></span>
            </div>
            <!--<div class="tv tv1">-->
              <!--<span class="tk">支付方式：</span>-->
              <!--<span class="tx">-->
              <!--<input type="radio" name="payType" checked/>微信支付-->
              <!--<input type="radio" name="payType"/>财付通-->
           <!--</span>-->
            <!--</div>-->
          </div>
        </div>
        <div class="ft">
          <button @click="toSubmit">下单并支付</button>
          <div class="ft-t">
            <span>退</span>
            不成功全额退款
          </div>
          <div class="ft-t">
            <span>快</span>
            全省速度最快
          </div>
        </div>
      </div>
    </div>
    <!--<modal :m="m"></modal>-->
  </div>
  <div class="no-order" v-show='noResult' >
    <p><img src="../assets/image/not_result.png" alt=""></p>
    <span>没有需要处理的违章信息</span>
  </div>
</div>
</template>
<script>
import * as API from '../assets/js/API.js'
import Modal from '../components/Modal'
import Loading from '../components/Loading.vue'
export default{
  components: {
    Modal,
    Loading
  },
  data () {
    return {
      money: '200',
      isAllSelect: false, // 是否全选中
      isSbtSelect: false, // 速办通是否单选中
      isEmail: false, // 是否邮寄
      isActive: false, // 是否高亮
      access_token: window.localStorage.getItem('accessToken'),
      openid: window.localStorage.getItem('openid'),
      carNo: this.$route.params.carNo,
      obj: {},
      noResult: false,
      loading: true, // 加载框
      header: {}, // 头部信息
      is_urgent: 0, // 是否需要加急
      csd: {},
      totalFineFee: 0, // 罚款本金
      totalDbf: 0,  // 总代办费
      totalJjf: 0, // 总加急费
      totalLateFee: 0, // 总滞纳金
      totalEmailFee: 0, // 总邮寄费
      totalPay: 0, // 总费用
      showPayPanel: false,
      selectCount: 0, // 违章项数
      checklist: document.getElementsByName('deal'), // 单选项列表
      fj: document.getElementsByClassName('fj'), // 罚金列表
      dbf: document.getElementsByClassName('dbf'), // 代办费
      jjf: document.getElementsByClassName('jjf'), // 加急费
      znj: document.getElementsByClassName('znj'), // 滞纳金
      item: document.getElementsByClassName('item'), // 所有违章向
      principal: '', // 委托人
      principal_phone: '', // 委托人电话
      violation_id: [], // 违章单号
      re_name: '', // 收件人姓名
      re_phone: '', // 收件人手机
      re_address: '', // 收件人地址
      driver_license: '', // 驾驶证号
      isExistKf: false, // 是否存在违章扣分项
      violation_item: [] // 违章扣分项
      // m: {
        // title: '提示',
        // content: '内容',
        // show: false
      // }
    }
  },
  created () {
    this.inquiryList()
  },
  methods: {
    // 实现全选功能
    allSelect () {
      this.violation_id = []
      this.isAllSelect = !this.isAllSelect
      this.initMoney()
      // 判断是否全选
      if (this.isAllSelect) {
        this.showPayPanel = true
        this.selectCount = this.checklist.length
        // 计算速办通费用
        this.sbt()
        for (let j = 0; j < this.fj.length; j++) {
          this.PayMoney(j)
        }
        // 计算总费用 = 实付代办费+实付加急费+邮寄费+滞纳金+罚款金 单位(元)
        this.email(this.isEmail)
        for (let i = 0; i < this.checklist.length; i++) {
          this.checklist[i].checked = true
          this.deal(this.checklist[i].getAttribute('dataid'), true)
          // this.violation_id.push(this.checklist[i].getAttribute('dataid'))
        }
      } else {
        this.showPayPanel = false
        this.violation_id = []
        for (let i = 0; i < this.checklist.length; i++) {
          this.checklist[i].checked = false
          this.deal(this.checklist[i].getAttribute('dataid'), true)
        }
      }
    },
    // 多选
    deal (v, sts) {
      // 禁止冒泡
      window.event.cancelBubble = true
      this.changeBg(v, sts)
      let len = this.checklist.length
      this.selectCount = 0
      this.initMoney()
      this.sbt()
      for (let j = 0; j < this.checklist.length; j++) {
        if (this.checklist[j].checked === true) {
          this.showPayPanel = true
          this.selectCount += 1
          this.PayMoney(j)
        }
      }
      // 计算总费用 = 实付代办费+实付加急费+邮寄费+滞纳金+罚款金 单位(元)
      this.email(this.isEmail)
      if (this.selectCount === 0) {
        this.showPayPanel = false
      }
      if (this.selectCount === len) {
        this.isAllSelect = true
        document.getElementsByClassName('all')[0].checked = true
      } else {
        this.isAllSelect = false
        document.getElementsByClassName('all')[0].checked = false
      }
    },
    // 点击高亮状态切换
    hightLight (v) {
      this.deal(v, false)
    },
    // 点击高亮
    changeBg (v, sts) {
      for (let i = 0; i < this.obj.length; i++) {
        if ((this.obj[i].violationId === v && this.obj[i].dealFlag === 1) || (this.obj[i].violationId === v && this.obj[i].dealFlag === 0 && this.obj[i].selfkf === 1)) {
          for (let j = 0; j < this.checklist.length; j++) {
            if (this.obj[i].violationId === this.checklist[j].getAttribute('dataid')) {
              if (!sts) {
                if (this.checklist[j].checked === true) {
                  this.checklist[j].checked = false
                } else {
                  this.checklist[j].checked = true
                }
              }
              if (this.checklist[j].checked === false) {
                this.item[i].style.backgroundColor = '#fff'
                this.violation_id.forEach((k, r) => {
                  if (k === v) {
                    this.violation_id.splice(r, 1)
                  }
                })
                if (!this.isExistDriverLicense()) {
                  this.isExistKf = false
                }
              } else {
                this.item[i].style.backgroundColor = 'lightseagreen'
                this.violation_id.push(v)
                if (this.isExistDriverLicense()) {
                  this.isExistKf = true
                }
              }
            }
          }
          break
        }
      }
    },
    // 加急费办理
    sbt () {
      this.totalJjf = 0
      if (this.isSbtSelect) {
        for (let j = 0; j < this.checklist.length; j++) {
          if (this.checklist[j].checked === true && this.checklist[j].getAttribute('datajjf') !== null) {
            this.totalJjf += parseInt(this.checklist[j].getAttribute('datajjf'))
          }
        }
      } else {
        this.totalJjf = 0
      }
    },
    // 加急费办理切换
    sbtStatus () {
      this.isSbtSelect = !this.isSbtSelect
      if (this.isSbtSelect) {
        this.is_urgent = 1
      } else {
        this.is_urgent = 0
      }
      this.sbt()
      //  计算总费用 = 实付代办费+实付加急费+邮寄费+滞纳金+罚款金 单位(元)
      this.email(this.isEmail)
    },
    // 初始化金额
    initMoney () {
      this.totalFineFee = 0
      this.totalDbf = 0
      this.totalLateFee = 0
      this.totalPay = 0
    },
    // 计算费用
    PayMoney (index) {
      if (this.fj.length !== 0) {
        this.totalFineFee += parseInt(this.fj[index].innerText)
      }
      if (this.dbf.length !== 0) {
        this.totalDbf += parseInt(this.dbf[index].innerText)
      }
      if (this.znj.length !== 0) {
        if (this.znj[index] !== undefined) {
          this.totalLateFee += parseInt(this.znj[index].innerText)
        }
      }
    },
    // 是否使用邮寄
    email (v) {
      if (v) {
        this.isEmail = true
        this.totalEmailFee = this.csd.violations_mail_fee + (this.selectCount - 1) * this.csd.violations_mail_cost
        this.totalPay = this.totalFineFee + this.totalDbf + this.totalJjf + this.totalLateFee + this.totalEmailFee
      } else {
        this.isEmail = false
        this.totalEmailFee = 0
        this.totalPay = this.totalFineFee + this.totalDbf + this.totalJjf + this.totalLateFee
      }
    },
   // 查询违章车辆列表
    inquiryList () {
      let param = {
        carNo: this.carNo,
        curPageNO: 1,
        pageSize: 20,
        openid: this.openid
      }
      this.$http.post(API.InquiryList, {access_token: this.access_token, param: JSON.stringify(param)}).then(
       (resp) => {
         this.loading = false
         let msg = resp.body.msg
         let data = resp.body.data
         if (msg === 'OK') {
           this.obj = data.vcs
           if (this.obj.length === 0) {
             this.noResult = true
           } else {
             this.noResult = false
           }
           this.header = data.titleInfo
           this.csd = data.csd
         } else {
           this.$Message.info(msg)
         }
       }
      )
    },
    // 判断是否存在违章扣分项
    isExistDriverLicense () {
      let isEx = false
      for (let j = 0; j < this.checklist.length; j++) {
        if (this.checklist[j].checked === true) {
          if (this.checklist[j].getAttribute('datakf') > 0) {
            isEx = true
          }
        }
      }
      return isEx
    },
    // 确认订单
    toSubmit () {
      if (this.isExistKf) {
        if (this.isExistDriverLicense() && this.driver_license === '') {
          this.$Message.info('请填写车主驾驶证号')
          return
        }
        // 判断驾驶证号长度
        if (this.driver_license.length !== 18 && this.driver_license.length !== 15) {
          this.$Message.info('车主驾驶证号格式不正确')
          return
        }
      }
      // 判断联系人是否为空
      if (this.principal === '') {
        this.$Message.info('联系人不能为空')
       // this.showModal('', '联系人不能为空!', true)
        return
      }
      // 判断联系人方式是否为空
      if (this.principal_phone === '') {
        this.$Message.info('联系人方式不能为空')
        // this.showModal('', '联系人方式不能为空!', true)
        return
      }
      // 判断是否使用邮寄
      if (this.isEmail) {
        if (this.re_name === '') {
          this.$Message.info('收件人姓名不能为空')
          return
        }
        if (this.re_phone === '') {
          this.$Message.info('收件人手机不能为空')
          return
        }
        if (this.re_address === '') {
          this.$Message.info('收件人地址不能为空')
          return
        }
      }
      // 确认提交
      this.showModal()
    },
    // 提交订单
    submitOrder () {
      let param = {
        open_id: this.openid,
        car_no: this.carNo,
        total_amount: this.totalPay,
        authorize_amount: this.totalDbf,
        haste_amount: this.totalJjf,
        delivery_amount: this.totalEmailFee,
        principal: this.principal,
        principal_phone: this.principal_phone,
        is_urgent: this.is_urgent,
        re_name: this.re_name,
        re_phone: this.re_phone,
        re_address: this.re_address,
        driver_license: this.driver_license,
        is_delivery: this.isEmail === false ? 0 : 1,
        violation_id: this.violation_id.join(',')
      }
      this.$http.post(API.SubmitOrder, {access_token: this.access_token, param: JSON.stringify(param)}).then(
        (resp) => {
          let code = resp.body.code
          let data = resp.body.data
          let msg = resp.body.msg
          if (code === 200 || code === '200') {
            window.location.href = 'https://topay/' + this.access_token + '/' + data.orderNo + '/' + data.totalAmount + '/' + data.sp_trans_id
          } else {
            this.$Message.info(msg)
          }
        }
      )
    },
    // 弹框面板
    showModal () {
      this.$Modal.confirm({
        content: '<p style="float:left;font-size:20px">请核对信息是否正确?</p>',
        onOk: () => {
          this.submitOrder()
        },
        onCancel: () => {
        }
      })
    }
  },
  filters: {
    timeFilter (v) {
      if (!v) return
      var now = new Date()
      now.setTime(v)
      let y = now.getFullYear()
      let m = now.getMonth() + 1
      let d = now.getDate()
      let h = now.getHours()
      let mm = now.getMinutes()
      let s = now.getSeconds()
      return y + '-' + (m < 10 ? '0' + m : m) + '-' +
        (d < 10 ? '0' + d : d) + '   ' + (h < 10 ? '0' + h : h) + ':' + (mm < 10 ? '0' + mm : mm) + ':' + (s < 10 ? '0' + s : s)
    },
    carTypeFilter (v) {
      let carType = [{'id': 1, 'name': '大型汽车'}, {'id': 2, 'name': '小型汽车'}, {'id': 16, 'name': '教练汽车'}, {'id': 7, 'name': '两、三轮摩托车'},
       {'id': 15, 'name': '挂车'}, {'id': 6, 'name': '外籍汽车'}, {'id': 26, 'name': '香港入出境车'}, {'id': 27, 'name': '澳门入出境车'}]
      for (let j = 0; j < carType.length; j++) {
        if (v === carType[j].id) {
          return carType[j].name
        }
      }
    },
    viloationDetailFilter (v) {
      if (v.length > 30) {
        return v.substr(0, 30)
      } else {
        return v
      }
    },
    moneyFilter (v) {
      if (v) {
        return v.toFixed(2)
      }
    }
  }
}
</script>
<style lang="scss">
@import '../assets/style/common.scss';
.inquiryList {
  .wrap {
    padding: px2rem(15px);
    > .hd {
      /*position: fixed;*/
      width: 100%;
      /*left: 5%;*/
      height: px2rem(80px);
      background-color: rgb(49, 53, 52);
      padding: px2rem(10px);
      border-radius: px2rem(5px);
      color: silver;
      box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
      -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
      span {
        display: block;
        line-height: px2rem(30px);
      }
    }
    > .bd {
      .item {
        /*height: px2rem(350px);*/
        min-height: px2rem(300px);
        width: 100%;
        margin-top: px2rem(10px);
        background-color: #fff;
        /*height: auto;*/
        border-radius: px2rem(10px);
        padding: px2rem(15px) px2rem(10px) px2rem(70px) px2rem(10px);
        box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        .cell {
          clear: both;
          display: block;
          width: 100%;
          /*height: px2rem(60px);*/
          /*min-height: px2rem(60px);*/
          /*margin-top: px2rem(20px);*/
          font-size: px2rem(24px);
          /*width: 100%;*/
          /*height: px2rem(50px);*/
          padding: px2rem(20px) 0;
          /*line-height: px2rem(50px);*/
          /*&:last-child{*/
          /*margin-top: px2rem(10px);*/
          /*border-bottom: 1px solid silver;*/
          /*}*/
          &:first-child {
            /*padding: 0 px2rem(10px);*/
            min-height: px2rem(50px) !important;
            border-bottom: 1px solid #f2f2f2;
            .k1 {
              width: 50%;
              float: left;
            }
            .v {
              width: 50%;
            }
          }
          .k {
            display: inline-block;
            float: left;
            width: 15%;
          }
          .v {
            width: 85%;
            float: left;
            display: inline-block;
            /*line-height: px2rem(40px);*/
            .tags{
              width: auto;
              height: px2rem(45px);
              float: left;
              .isdeal, .dealtype {
                display: inline-block;
                background-color: forestgreen;
                width: auto;
                height: px2rem(35px);
                border-radius: px2rem(10px);
                color: #fff;
                font-size: px2rem(16px);
                text-align: center;
                line-height: px2rem(35px);
                float: left;
                padding: 0 px2rem(10px);
              }
              .dealtype {
                float: left;
                background-color: red;
                /*margin-left: px2rem(20px);*/
              }
              .type1 {
                background-color: yellowgreen;
              }
              .type2 {
                background-color: red;
              }
              .b {
                float: left;
                margin:0 px2rem(10px);
              }
            }
            .bl {
              float: right;
              input{
                position: relative;
                top: px2rem(4px);
                right: px2rem(5px);
              }
              /*margin-right: px2rem(20px);*/
            }
          }
          /*.v1 {*/
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 3;*/
            /*overflow: hidden;*/
          /*}*/
        }
        .c0 {
          /*height: px2rem(60px);*/
          padding: px2rem(10px) 0;
        }
      }
      .m {
        line-height: px2rem(50px);
        .tv1 {
          margin-top: px2rem(20px);
        }
        .em {
          .rm {
            font-size: px2rem(20px);
            line-height: px2rem(30px);
            color: forestgreen;
          }
          .tk {
            display: block;
            input[type='text'] {
              border: none;
              border-bottom: 1px solid silver;
            }
          }
        }
        .tt {
          font-size: px2rem(25px);
          font-weight: bold;
          span {
            font-size: px2rem(20px);
            font-weight: 200;
          }
        }
        .tx {
          input[type='text'] {
            border: none;
            border-bottom: 1px solid #eee;
          }
          input[type='radio'] {
            margin: 0 px2rem(10px);
          }
        }
      }
      .paypanel {
        margin-top: px2rem(10px);
        background-color: #fff;
        border-radius: px2rem(10px);
        padding: px2rem(15px) px2rem(10px) px2rem(30px) px2rem(10px);
        box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        -webkit-box-shadow: 0 0 10px 0 rgba(155, 143, 143, 0.6);
        font-size: px2rem(24px);
        > .hd {
          input {
            margin: px2rem(10px);
          }
          .cred{
            color: red;
          }

        }
        >.ft {
           height: px2rem(140px);
           width: 100%;
           padding: px2rem(20px) 10%;
           button {
            width: 100%;
            height: px2rem(60px);
            /*margin: px2rem(20px) 10%;*/
            border-radius: px2rem(5px);
            outline: none;
            border: none;
            background-color: rgb(247, 147, 43);
            color: #fff;
            font-size: px2rem(30px);
           }
          .ft-t {
            text-align: center;
            float: left;
            margin: px2rem(10px);
            span {
              display: inline-block;
              width: px2rem(30px);
              height: px2rem(30px);
              line-height: px2rem(30px);
              border-radius: px2rem(30px);
              color: #fff;
              background-color: green;
            }
          }
        }
      }
    }
  }
}
</style>
